<template>
  <div id="main">
    <div>
      <h3 id="title">
        {{username}}---欢迎您，余额查询
      </h3>
    </div>
    <Back></Back>
    <div class="balance" v-for="account in accountList" v-if="account!=null">
      <p>您的{{account.a_type}}余额为: {{account.money}}￥</p>
    </div>
    <div class="balance" v-else>
      <p>您的余额为: 0￥</p>
    </div>
  </div>
</template>

<script>
import back from '@/components/back/Return';
import { queryMoney } from '@/api/info';
export default {
  name: "Main",
  data() {
    return {
      accountList:[],
      balance: '20',
      username: "admin",
      //表单校验
      rules: {
        card: [
          { required: true, message: '请输入卡号', trigger: 'blur' },
          { min: 15, max: 19, message: '卡号格式不正确！', trigger: 'blur' }
        ],
        balance: [
          { required: true, message: '请输入转账或存款金额', trigger: 'blur' },
          { min: 1, message: '金额至少为1元！', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.find();
  },
  methods: {
  find(){
    let userId=this.$route.query.userId
  console.log(userId);
  //发送请求
  queryMoney(userId).then(respone=>{
    console.log(respone);
    this.accountList=respone
  }).catch(error=>{
    console.log(error);
  })
}
  },
  components: {
    'Back': back
  }

}
</script>

<style scoped>
#main{
  margin: 20px 300px;
}
.balance{
  text-align: center;
  margin: 80px auto;
}
#find{
  width: 1000px;
  margin: 80px auto;
}
form.el-form.demo-form-inline.el-form--inline{
  text-align: center;
}
#title{
  line-height: 100px;
  text-align: center;
  color: #00a854;
}
</style>